<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="div_top" style="width: 100%;height:900px;">
    <div id="pie2" style="width: 100%;height:300px;"></div>
</div>


<script type="text/javascript">
    var dom = document.getElementById('pie2');
    var myChart_pie2 = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        title: {
            text: '职位城市分布情况',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1, name: '城市1'},
                    {value: 2, name: '城市2'},
                    {value: 3, name: '城市3'},
                    {value: 4, name: '城市4'},
                    {value: 5, name: '城市5'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart_pie2.setOption(option);
    }

    window.addEventListener('resize', myChart_pie2.resize);
</script>



<script type="text/javascript">
    $.ajax({
        url: 'http://127.0.0.1:8000/api_city_json',
        type: 'GET',
        data: {},
        dataType: 'json',
        timeout: 10000,
        success: function (result) {

            address = []
            job_num = []
            address_proportion = [];    //新数组
            other_address_sum = 0
            adress_dict = []

            for (var i in result) {
                if (i <= 7) {
                    address.push(result[i]['address'])
                    job_num.push(result[i]['job_num'])
                } else {
                    other_address_sum = other_address_sum + result[i]['job_num']
                }
            }
            address.push('其他')
            job_num.push(other_address_sum)

            for (var i in address) {
                adress_dict.push({'name': address[i], 'value': job_num[i]})
            }

            myChart_pie2.setOption({
                series: [
                    {
                        data: adress_dict
                    }
                ]
            });
        }
    });

</script>
</body>
</html>